<style scoped>

</style>
<style>

    .now-data-myself {
        width: 40%;
        position: absolute;
        border-right: 1px solid rgba(227, 227, 227, 0.6);
    }
    .con {
        position: relative;
        max-width: 280px;
        margin: auto;
    }
    .con .wh_content_all {
        background: transparent !important;
    }
    .wh_top_changge li {
        color: #F56C6C !important;
        font-size: 15px !important;
    }
    .wh_content_item, .wh_content_item_tag {
        color: #303133 !important;
    }
    .wh_content_item .wh_isToday {
        background: rgb(102, 177, 255)  !important;
        color: #fff  !important;
    }
    .wh_content_item .wh_chose_day {
        background: #409EFF  !important;
        color: #ffff  !important;
    }
    .wh_item_date:hover {
        background: rgb(217, 236, 255) !important;
        border-radius: 100px !important;
        color: rgb(102, 177, 255)  !important;
    }
    .wh_jiantou1[data-v-2ebcbc83] {
        border-top: 2px solid #909399;
        border-left: 2px solid #909399;
        width: 7px;
        height: 7px;
    }
    .wh_jiantou2[data-v-2ebcbc83] {
        border-top: 2px solid #909399;
        border-right: 2px solid #909399;
        width: 7px;
        height: 7px;
    }
    .wh_top_tag[data-v-2ebcbc83] {
        color: #409EFF;
        border-top: 1px solid rgba(227, 227, 227, 0.6);
        border-bottom: 1px solid rgba(227, 227, 227, 0.6);
    }
    .wh_container[data-v-2ebcbc83] {
        max-width: 280px;
    }
    .wh_top_changge[data-v-2ebcbc83] {
        display: flex;
    }
    .now-data-myself-time {
        color: #F56C6C;
        font-size: 28px;
        height: 30px;
        font-family: "Helvetica Neue";
    }
    .now-data-myself-week {
        font-size: 10px;
        color: #909399;
    }
    .wh_top_changge .wh_content_li[data-v-2ebcbc83] {
        font-family: Helvetica;
    }

    .wh_content_item>.wh_isMark {
        background: #F56C6C !important;
    }

</style>
<template>
    <div>
        <div class="top-title bg-white">
            <div class="top-title-text text-18 black blod">{{type}}</div>
        </div>
        <div class="page-content flex-column" style="height: calc(100% - 50px);">
            <div class="search-block bg-white p-20">
                <Form inline :label-width="20">
                    <FormItem label=" ">
                        <Input v-model="search.str" class="w160" type="text" placeholder="请输入人员名称/手机号"/>
                    </FormItem>
                    <FormItem label=" " :label-width="20">
                        <Select v-model="search.a" class="w160"placeholder="所属机构" clearable>
                            <Option value="1">长安区</Option>
                            <Option value="2">碑林区</Option>
                        </Select>
                    </FormItem>
                    <FormItem label=" " :label-width="20">
                        <Select v-model="search.b" class="w160"placeholder="考勤区域" clearable>
                            <Option value="1">区域一</Option>
                            <Option value="2">区域二</Option>
                        </Select>
                    </FormItem>
                    <FormItem label=" " :label-width="20">
                        <Select v-model="search.c" class="w160"placeholder="状态" clearable>
                            <Option value="1">正常</Option>
                            <Option value="2">请假中</Option>
                        </Select>
                    </FormItem>
                    <FormItem :label-width="0">
                        <Button @click="goSearch" class="m-r-10" type="primary">搜索</Button>
                        <Button @click="reset">重置</Button>
                    </FormItem>
                    <!--<FormItem class="f-r" :label-width="0">-->
                        <!--<Button @click="addItem" class="m-r-10" type="primary"><img src="assets/image/add.png">新增</Button>-->
                    <!--</FormItem>-->
                </Form>
            </div>

            <div class="content-block bg-white p-0-20 flex-1 flex-column">

                <div id="mainContent" class="flex-1-height">

                    <div class="">
                        <Table :height="tableHeight"
                               :columns="columns"
                               :data="list"
                        >
                        </Table>
                    </div>

                </div>
                <div class="page-box">
                    <Page :total="total"
                          :current="page"
                          show-sizer show-elevator show-total
                          @on-change="onPageChange"
                          @on-page-size-change="changePageSize"
                          :page-size="pageSize"
                    />
                </div>

            </div>
        </div>

        <Modal v-model="detailModal"
               title="查看"
               class-name="vertical-center-modal"
               width="800"
        >
            <div class="p-l-20 max-h550">
                <div class="top-title-text text-18 black blod">基础信息</div>
                <div class=" max-h500">

                    <div class="p-20">

                        <div class="flex h30 m-b-20">

                            <div class="flex w30p">
                                <div class="gray w80">人员姓名：</div>
                                <div class="flex-1">{{detail.mc}}</div>
                            </div>
                            <div class="flex w30p">
                                <div class="gray w80">性别：</div>
                                <div class="flex-1">男</div>
                            </div>
                            <div class="flex w30p">
                                <div class="gray w80">岗位：</div>
                                <div class="flex-1">{{detail.gw}}</div>
                            </div>
                        </div>

                        <div class="flex h30 m-b-20">

                            <div class="flex w30p">
                                <div class="gray w80">手机号码：</div>
                                <div class="flex-1">{{detail.sjh}}</div>
                            </div>
                            <div class="flex w30p">
                                <div class="gray w100">紧急联系人：</div>
                                <div class="flex-1">-----</div>
                            </div>
                            <div class="flex w30p">
                                <div class="gray w80">手机号码：</div>
                                <div class="flex-1">-----</div>
                            </div>
                        </div>

                        <div class="flex h30 m-b-20">

                            <div class="flex w30p">
                                <div class="gray w80">所属机构：</div>
                                <div class="flex-1">{{detail.jg}}</div>
                            </div>
                            <div class="flex w30p">
                                <div class="gray w80">考勤区域：</div>
                                <div class="flex-1">{{detail.qy}}</div>
                            </div>
                        </div>
                    </div>
                </div>


                <div class="top-title-text text-18 black blod">考勤信息</div>
                <div class=" max-h500">

                    <div class="p-20 flex">
                        <div class="flex-1 con">
                            <Calendar
                                    v-on:choseDay="clickDay"
                                    v-on:changeMonth="changeDate"
                                    v-on:isToday="clickToday"
                                    :markDate="markDate"
                            >

                            </Calendar>
                        </div>
                        <div class="flex-1">

                            <div class="p-15">
                                <div class="flex-c h30">
                                    <div class="flex-1 blod">4月:</div>
                                    <div class="flex-1">迟到：2次</div>
                                    <div class="flex-1">事假：2次</div>
                                    <div class="flex-1">旷工：2次</div>
                                </div>

                                <div class="p-10-0">

                                    <div class="flex-c h30">
                                        <div class="flex-1 blod">21日:</div>
                                        <div class="flex-1">请假2天</div>
                                        <div class="flex-1"></div>
                                        <div class="flex-1"></div>
                                    </div>
                                    <div class="flex-c h30">
                                        <div class="flex-1">09:14 申请请假</div>
                                        <div class="flex-1">14:00 王二小审批通过</div>
                                    </div>
                                </div>

                                <div class="p-10-0">

                                    <div class="flex-c h30">
                                        <div class="flex-1 blod">24日:</div>
                                        <div class="flex-1">请假2天</div>
                                        <div class="flex-1"></div>
                                        <div class="flex-1"></div>
                                    </div>
                                    <div class="flex-c h30">
                                        <div class="flex-1">09:14 申请请假</div>
                                        <div class="flex-1">14:00 王二小审批通过</div>
                                    </div>

                                </div>





                            </div>

                        </div>

                    </div>

                </div>
            </div>
            <div slot="footer">
                <Button @click="detailModal = false" class="m-r-10">取消</Button>
                <Button @click="showItemLine" type="primary">查看轨迹</Button>
            </div>

        </Modal>

        <Modal v-model="itemModal"
               :title="itemData.id? '编辑': '新增'"
               class-name="vertical-center-modal"
               width="800"
        >
            <div class="p-l-20">
                <div class="top-title-text text-18 black blod">基础信息</div>
                <div class="p-15-0 max-h500">
                    <Form label-position="top">

                        <Row>
                            <Col span="11">
                                <FormItem label="门禁名称" required>
                                    <Input v-model="itemData.mj_mc" class="w240" type="text" placeholder="请输入"/>
                                </FormItem>
                            </Col>
                            <Col span="2" style="text-align: center"></Col>
                            <Col span="11">
                                <FormItem label="门禁编号" required>
                                    <Input v-model="itemData.mj_bh" class="w240" type="text" placeholder="请输入"/>
                                </FormItem>
                            </Col>
                        </Row>

                        <Row>
                            <Col span="11">
                                <FormItem label="所在位置" required>
                                    <Input v-model="itemData.sz_wz" class="w240" type="text" placeholder="请输入"/>
                                </FormItem>
                            </Col>
                            <Col span="2" style="text-align: center"></Col>
                            <Col span="11">
                                <FormItem label="门号" required>
                                    <Input v-model="itemData.mh" class="w240" type="text" placeholder="请输入"/>
                                </FormItem>
                            </Col>
                        </Row>

                        <Row>
                            <Col span="11">
                                <FormItem label="管理员" required>
                                    <Input v-model="itemData.gly" class="w240" type="text" placeholder="请输入"/>
                                </FormItem>
                            </Col>
                            <Col span="2" style="text-align: center"></Col>
                            <Col span="11">
                                <FormItem label="联系方式" required>
                                    <Input v-model="itemData.lxfs" class="w240" type="text" placeholder="请输入"/>
                                </FormItem>
                            </Col>
                        </Row>

                        <FormItem label="描述">
                            <Input v-model="itemData.ms" type="textarea" maxlength="500" show-word-limit
                                   :rows="4" class="flex-1" placeholder="请输入描述内容"></Input>
                        </FormItem>
                    </Form>

                </div>
            </div>

            <div slot="footer">
                <Button @click="itemModal = false" class="m-r-10">取消</Button>
                <Button @click="confirm" type="primary">确定</Button>
            </div>
        </Modal>


        <Modal v-model="lineModal"
               :title="currentDate + ' 手环轨迹'"
               class-name="vertical-center-modal"
               width="1200"
        >
            <div style="height: 650px;width:100%;">
                <div v-if="lineModal" style="width: 100%;height:100%" id="lineBox">

                </div>
            </div>

            <div slot="footer">
                <!--<Button type="primary">关闭</Button>-->
            </div>

        </Modal>
    </div>
</template>

<script>
    import Calendar from 'vue-calendar-component';

    var map
    var mouseTool
    var polyEditor

    let defaultOpt = {
        strokeColor: "#55f",
        strokeWeight: 6,
        strokeOpacity: 0.2,
        fillColor: '#1791fc',
        fillOpacity: 0.6,
        strokeStyle: "solid",
        cursor: 'pointer',
    };

    let editOpt = {
        strokeColor: "#1791fc",
        strokeWeight: 6,
        strokeOpacity: 0.2,
        fillColor: '#ff5555',
        fillOpacity: 0.6,
        strokeStyle: "solid",
        cursor: 'pointer',
    };


    let lineMap;
    export default {
        components: {
            Calendar
        },
        data() {
            return {
                type: '环卫管理',

                search: {
                    str: '',
                    timeArr: [],
                },
                total: 0,
                page: 1,
                pageSize: 10,

                tableHeight: 500,
                columns: [
                    {
                        title: '环卫人员姓名',
                        key: 'mc',
                    },
                    {
                        title: '手机号码',
                        key: 'sjh'
                    },
                    {
                        title: '岗位',
                        key: 'gw'
                    },
                    {
                        title: '所属机构',
                        key: 'jg'
                    },
                    {
                        title: '考勤区域',
                        key: 'qy',
                        // sortable: 'custom'
                    },
                    {
                        title: '状态',
                        key: 'zt',
                        // sortable: 'custom'
                    },
                    {
                        title: '操作',
                        render: (h, params) => {
                            let look = h('a', {
                                class: 'm-r-10',
                                on: {
                                    click: () => {
                                        console.log('查看', params.row);
                                        this.detailModal = true;
                                        this.detail = params.row;
                                    }
                                }
                            }, '查看');
                            let edit = h('a', {
                                class: 'm-r-10',
                                on: {
                                    click: () => {
                                        console.log('编辑', params.row);
                                        this.editItem(params.row);
                                    }
                                }
                            }, '编辑');
                            let del = h('a', {
                                class: 'red m-r-10',
                                on: {
                                    click: () => {
                                        console.log('删除', params.row);

                                        this.$Modal.confirm({
                                            title: '提示',
                                            content: '<p>确认删除吗？</p>',
                                            onOk: () => {
                                                let postData = {
                                                    mjId: params.row.id
                                                };

                                                this.util.post('/hand/deleteMj', postData, 'formdata').then(res => {
                                                    if(res.status == 200) {
                                                        this.$Message.success(res.msg);
                                                        this.getList();
                                                    } else {
                                                        this.$Message.warning(res.msg)
                                                    }
                                                })
                                            },
                                        });
                                    }
                                }
                            }, '删除');
                            return h('div', [look]);
                        }
                    },
                ],

                list: [
                    {
                        mc: '黄良仙',
                        sjh: '15296783113',
                        imei: '863659048822117',
                        gw: '环卫工',
                        jg: '长安区',
                        qy: '区域一、区域二',
                        zt: '正常',
                    },
                    {
                        mc: '胡勺勺',
                        sjh: '13028004550',
                        imei: '2343243238',
                        gw: '环卫工',
                        jg: '碑林区',
                        qy: '区域二',
                        zt: '请假中',
                    },
                ],

                itemModal: false,
                itemData: {
                    "mj_mc":"",
                    "mj_bh": "",
                    "sz_wz": "",
                    "mh": "",
                    "lxfs": "",
                    "ms": "",
                    "gly": "",
                },


                detailModal: false,
                detail: {},
                markDate: [
                    '2023/3/19',
                    '2023/3/18',
                    '2023/3/16',
                ],


                lineModal: false,

                currentDate: moment().format('YYYY-MM-DD'),
            }
        },
        created() {
            // this.getList();
            this.getAreaList();
        },
        mounted() {
            let mainContent = document.getElementById('mainContent')
            if(mainContent) {
                this.tableHeight =  mainContent.offsetHeight - 40
            }
            this.timer = setInterval(() => {
                if(mainContent) {
                    this.tableHeight =  mainContent.offsetHeight - 40
                } else {
                    mainContent = document.getElementById('mainContent')
                }
            }, 1000)
        },
        beforeDestroy() {
            clearInterval(this.timer);
        },
        methods: {
            clickDay(data) {
                console.log(data); //选中某天

                let dateArr = data.split('/')
                this.currentDate = dateArr[0] + '-' + dateArr[1] + '-' + dateArr[2]

            },
            changeDate(data) {
                console.log(data); //左右点击切换月份
            },
            clickToday(data) {
                // console.log(data); // 跳到了本月
            },


            onPageChange(page) {
                this.page = page;
                this.getList();
            },
            //改变每页条数
            changePageSize(size) {
                this.pageSize = size;
                this.onPageChange(1)
            },
            goSearch() {
                this.onPageChange(1)
            },
            reset() {
                this.search = {
                    str: '',
                    timeArr: [],
                };
                this.goSearch();
            },

            getAreaList() {
                let postData = {

                };

                this.util.get('/hand/wlLists', postData).then(res => {
                    console.log('获取围栏列表', JSON.parse(JSON.stringify(res)))
                    this.areaList = res.data || []

                    this.areaList.forEach(v => {
                        try{

                          v.wl_zbd = JSON.parse(v.wl_zbd)
                          if(Array.isArray(v.wl_zbd)) {
                            //有可能是两种形式，数组的或对象的
                            if(v.wl_zbd) {

                            }

                            this.createPolygon(v);
                          }
                        }catch(err) {
                            // console.log('绘制错误', err);
                        }
                    })
                })
            },
            getList() {
                return
                let postData = {
                    pageSize: this.pageSize,
                    pageNum: this.page,
                    nameOrCode: this.search.str,
                };

                if(this.search.timeArr.length) {
                    if(this.search.timeArr[0]) {
                        postData.startDate = moment(this.search.timeArr[0]).format('YYYY-MM-DD 00:00:00')
                    }
                    if(this.search.timeArr[1]) {
                        postData.endDate = moment(this.search.timeArr[1]).format('YYYY-MM-DD 23:59:59')
                    }
                }

                this.util.get('/hand/mjLists', postData).then(res => {
                    console.log('获取列表', JSON.parse(JSON.stringify(res)))
                    this.list = res.data || [];
                    this.total = res.total || 0;

                })
            },

            addItem() {
                this.itemData = {
                    "mj_mc":"",
                    "mj_bh": "",
                    "sz_wz": "",
                    "mh": "",
                    "lxfs": "",
                    "ms": "",
                    "gly": "",
                };
                this.itemModal = true;
            },
            editItem(itemData) {

                this.itemData = {
                    id: itemData.id,
                    "mj_mc": itemData.mj_mc,
                    "mj_bh": itemData.mj_bh,
                    "sz_wz": itemData.sz_wz,
                    "mh": itemData.mh,
                    "lxfs": itemData.lxfs,
                    "ms": itemData.ms,
                    "gly": itemData.gly,
                };
                this.itemModal = true;
            },
            confirm() {

                let itemData = this.itemData;

                if(!itemData.mj_mc) {
                    this.$Message.warning('请输入名称');
                    return;
                }
                if(!itemData.mj_bh) {
                    this.$Message.warning('请输入编号');
                    return;
                }
                if(!itemData.sz_wz) {
                    this.$Message.warning('请输入所在位置');
                    return;
                }
                if(!itemData.mh) {
                    this.$Message.warning('请输入门号');
                    return;
                }
                if(!itemData.gly) {
                    this.$Message.warning('请输入管理员');
                    return;
                }
                if(!itemData.lxfs) {
                    this.$Message.warning('请输入联系方式');
                    return;
                }

                let postData = {
                    "mj_mc": itemData.mj_mc,
                    "mj_bh": itemData.mj_bh,
                    "sz_wz": itemData.sz_wz,
                    "mh": itemData.mh,
                    "lxfs": itemData.lxfs,
                    "ms": itemData.ms,
                    "gly": itemData.gly,
                };

                let url = '/hand/editMj';
                if(itemData.id) {
                    postData.id = itemData.id;
                    url = '/hand/editMj';
                }

                this.util.post(url, postData).then(res => {
                    if(res.status == 200) {
                        this.$Message.success(res.msg);
                        this.getList();
                        this.itemModal = false;
                    } else {
                        this.$Message.warning(res.msg)
                    }
                })

            },

            async showItemLine() {

                let lines = await this.getLine();
                if(!lines.length) {
                    return;
                }

                this.lineModal = true;

                setTimeout(() => {

                    lineMap =  new AMap.Map("lineBox", {
                        center: [111.017907,40.031257],
                        zoom: 14,
                        doubleClickZoom: false,
                    });
                    console.log('lineMap', lineMap)


                    setTimeout(async () => {
                        console.log('绘制区域')
                        let list = this.areaList.map(v => {
                            return {
                                wl_mc: v.wl_mc,
                                wl_zbd: v.wl_zbd,
                            }
                        })
                        this.createPolygon(list[0], lineMap);

                        console.log('绘制轨迹')


                        lines.forEach(line => {
                            this.createPolyline(line, lineMap)
                        })

                        // let line = [[111.002156,40.041337],[111.001504,40.039023],[110.99943,40.036619],[110.99866,40.030948],[110.999608,40.029405],[111.003756,40.028452],[111.005948,40.027046],[111.0098,40.02573],[111.011459,40.02759],[111.005474,40.028951],[111.001563,40.030585],[111.001504,40.034305],[111.001385,40.036846],[111.002985,40.038071],[111.002807,40.040611],[111.003637,40.040747]];
                        // this.createPolyline(line, lineMap)
                    }, 500)
                }, 500)
            },
            getLine() {
                return new Promise(resolve => {
                    let date = this.currentDate || '2023-03-24'
                    this.util.get(`/hand/locationInf?search_date=${date}&imei=${this.detail.imei}`).then(res => {
                        console.log('获取到的路径数据', res)
                        if (res.data && res.data.length) {
                            let list = res.data
                            let paths = []
                            list.forEach(v => {
                                let item = paths.find(val => val.imei == v.imei)
                                if (item) {
                                    item.path.push({
                                        latitude: v.latitude,
                                        longitude: v.longitude,
                                    })
                                } else {
                                    paths.push({
                                        imei: v.imei,
                                        path: [{
                                            latitude: v.latitude,
                                            longitude: v.longitude,
                                        }]
                                    })
                                }
                            })
                            console.log('路径汇总', paths);

                            resolve(paths)
                        } else {
                            this.$Message.warning('未获取到日期 ' + date + ' 的路径数据')
                            resolve('')
                        }
                    })
                })
            },
            createPolygon(item, mapObj) {

                if(!item.wl_zbd) {
                    return;
                }

                var polygon = new AMap.Polygon({
                    path: item.wl_zbd.map(v => {
                        return [v.longitude ||v[0], v.latitude || v[1]]
                    }),
                    ...defaultOpt
                });

                let lnglat = polygon.getBounds().getCenter()
                // console.log('中心', [lnglat.lng,lnglat.lat])


                var text = new AMap.Text({
                    text:item.wl_mc,
                    anchor:'center', // 设置文本标记锚点
                    style:{
                        'text-align': 'center',
                        'font-size': '20px',
                        'color': 'white',
                        'background-color': 'transparent',
                        'border-width': 0,

                        // 'padding': '.75rem 1.25rem',
                        // 'margin-bottom': '1rem',
                        // 'border-radius': '.25rem',
                        // 'background-color': 'white',
                        // 'width': '15rem',
                        // 'border-width': 0,
                        // 'box-shadow': '0 2px 6px 0 rgba(114, 124, 245, .5)',
                        'text-align': 'center',
                        'font-size': '20px',
                        'color': 'white'
                    },
                    position: [lnglat.lng,lnglat.lat],
                });

                polygon.Data = item;
                polygon.Text = text;
                item.polygon = polygon;

                console.log('mapObj', mapObj)
                if(mapObj) {
                    console.log('mapObj2', mapObj)
                    mapObj.add([polygon, text])
                    mapObj.setFitView();
                } else {
                    polygon.on('click', this.handleShowPolygon);
                    map.add([polygon, text])
                    map.setFitView();
                }
            },
            createPolyline(item, mapObj) {
                let path = item.path.map(v => [v.longitude, v.latitude]);
                var polyline = new AMap.Polyline({
                    path: path,
                    isOutline: true,
                    outlineColor: '#ffeeff',
                    borderWeight: 3,
                    strokeColor: '#3366FF',
                    strokeOpacity: 1,
                    strokeWeight: 6,
                    showDir: true,
                    strokeStyle: "solid",
                    strokeDasharray: [10, 5],
                    lineJoin: 'round',
                    lineCap: 'round',
                    zIndex: 50,
                })
                mapObj.add(polyline)
                mapObj.setFitView();
            },

        },
    }
</script>

